﻿@model CAF.WebSite.Mvc.Models.Users.RegisterModel
@using CAF.WebSite.Application.WebUI.UI;
@using CAF.Infrastructure.Core;
@using CAF.WebSite.Application.WebUI;
@using CaptchaMvc.Models;
@{
    Layout = null;

    Html.AddTitleParts(T("PageTitle.Register").Text);
    var registerUrl = Url.RouteUrl("Register");
    if (!String.IsNullOrEmpty(this.Context.Request.QueryString["returnUrl"]))
    {
        var webHelper = EngineContext.Current.Resolve<IWebHelper>();
        registerUrl = webHelper.ModifyQueryString(registerUrl, "returnurl=" + HttpUtility.UrlEncode(this.Context.Request.QueryString["returnUrl"]), null);
    }
    // add css assets
    var MediaRootPath = "~/Themes/AlphaDefault/";
    Html.AppendCssFileParts(
       MediaRootPath + "Content/css/global.css",
       MediaRootPath + "Content/css/register.css",
       MediaRootPath + "Content/css/bootstrap.min.css"
       );
    // add js assets (Head)
    Html.AppendScriptParts(ResourceLocation.Head,
        MediaRootPath + "Content/js/jquery.js",
        MediaRootPath + "Content/js/bootstrap.min.js",
        MediaRootPath + "Content/js/common.js"
       );
}
<!DOCTYPE html>

<html lang="en">
<!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit" />
    @Html.MetaAcceptLanguage()
    @Html.WorkCssFiles(this.Url, ResourceLocation.Head)
    @Html.WorkScripts(this.Url, ResourceLocation.Head)
    <link rel="shortcut icon" href="~/favicon.ico" />
</head>
<body>
    <div class="section">
        @Html.Action("SiteBar", "Common", new { area = "" })

        <div class="register">
            <div class="register_logo01">
                <div class="register_logo"></div>
                <div class="register_line"></div>
                <div class="register_text">注册会员</div>
            </div>
            <div class="clear"></div>
        </div>


        <div class="center">
            <div id="regist" class="w">
                <div class="mt">
                    <ul class="tab"></ul>
                    <div class="extra">
                        <span>我已经注册，现在就 <a class="flk13" href="@Url.RouteUrl("Login")">登录</a> </span>
                    </div>
                </div>
                <div class="mc">
                    @Html.AntiForgeryToken()
                    <div id="div_1" class="form">
                        <div class="item" style="display: none;">
                            <span class="label">账户 </span>

                            <div class="fl item-ifo">
                                <div class="o-intelligent-regName">
                                    <input id="txt_username" name="txt_username" class="text01 username input_true" value=""
                                           tabindex="1" autocomplete="off" maxlength="20" type="text">
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <span class="label">邮箱</span>

                            <div class="fl item-ifo">
                                <input id="email" name="email" class="text01 username input_true" type="text" maxlength="50"
                                       autocomplete="off" tabindex="2"  style="ime-mode: disabled">
                            </div>
                        </div>
                        <div class="item">
                            <span class="label">手机号码</span>

                            <div class="fl item-ifo">
                                <input id="phone" name="phone" class="text01 phone input_true" type="text" maxlength="11"
                                       autocomplete="off" tabindex="2"  style="ime-mode: disabled">
                            </div>
                        </div>
                        <div class="item">
                            <span class="label">密码 </span>

                            <div class="fl item-ifo">
                                <input id="password" name="password" class="text01 password input_true"
                                       style="ime-mode: disabled;" tabindex="3" autocomplete="off" maxlength="20"
                                       type="password">
                            </div>
                        </div>
                        <div class="item">
                            <span class="label"> 确认密码 </span>

                            <div class="fl item-ifo">
                                <input id="pwdrepeat" name="pwdrepeat" class="text01 password input_true" autocomplete="off"
                                       onpaste="return false" tabindex="4" maxlength="20" type="password">
                            </div>
                        </div>
                        <div class="item">
                            <span class="label">&nbsp;</span>
                            <div class="fl item-ifo">
                                <input class="text02" type="text" id="phonecode" tabindex="5" name="txt_phonecode" style="ime-mode: disabled">
                                <span><img id="checkCodeImg" title="点击更换验证码" src="/Member/GetCheckCode" class="input_codeimg" /></span>
                                <input type="button" class="send_code" id="input_sendcode" name="input_sendcode" value="发送验证码" />
                            </div>
                        </div>
                        <div class="item phone_yanz">
                            <span class="label">&nbsp;</span>
                            <div class="fl item-ifo">
                                <input type="text" id="phonecode3" placeholder="请输入你所收到的手机验证码" />
                            </div>
                        </div>
                        <div class="item">
                            <span class="label">&nbsp;</span>
                            <div class="fl item-ifo">
                                <input id="readme" name="readme" checked class="checkbox" value="" type="checkbox">
                                <label for="protocol">我已阅读并同意 <a class="blue" href="#">《药坊网网站注册协议》</a></label>
                            </div>
                        </div>
                        <div class="item">
                            <span class="label">&nbsp;</span><input type="button" class="input_submit" id="input_submit" value="立即注册" />
                        </div>
                    </div>
                    <div class="mc_line"></div>
                    <div class="mc_info">
                        <div class="mc_text">
                            <div class="mc_iteminfo01">注册成为<span class="txtred">VIP会员</span>您将享受更多的服务</div>
                            <div class="mc_iteminfo02"><span class="txtred">海量</span> 可以查看更多代理商联系信息</div>
                            <div class="mc_iteminfo02"><span class="txtred">精准</span> 广告投放，让您的广告不在漫无目的</div>
                            <div class="mc_iteminfo02"><span class="txtred">定制</span> 我们会为您提供定制的代理商信息</div>
                        </div>
                        <div class="mc_phone">
                            <div class="mc_iteminfo02">申请VIP广告商会员请拨打</div>
                            <div class="mc_iteminfo03">400-888-8888</div>
                        </div>
                    </div>

                </div>
            </div>

            <div class="clear"></div>
        </div>

        @Html.Action("Footer", "Common", new { area = "" })
    </div>
    <script language="javascript" type="text/javascript">
        //随机生产用户名
        var chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
        function generateMixed(n) {
            var res = "Y";
            for (var i = 0; i < n ; i++) {
                var id = Math.ceil(Math.random() * 35);
                res += chars[id];
            }

            return res;
        }
        $(function () {
            var token = $('[name=__RequestVerificationToken]').val();

            //得到代理商各个文本框的值
            var name;//用户名
            var pwd;  //密码
            var pwdrepeat;//重复密码
            var phone;//手机号码
            var phonecode;//手机验证码

            //代理商验证Start
            validatetxt("#txt_username", "请输入账户", "input_false");
            validatetxt("#email", "请输入邮箱", "input_false");
            validatepassword("#password", "请输入密码", "input_false");
            validatepasswordagain("#pwdrepeat", "#password", "请输入密码", "输入密码不一致", "input_false");
            validatetxt("#phone", "请输入手机号码", "input_false");
            validatecode("#phonecode", "请输入验证码", "input_false");
            //     代理商验证End


            $(document).keydown(function (event) {
                if (event.keyCode == 13) {
                    $(".input_submit").click();
                }
            });

            $("#input_submit").click(function () {
                //得到各个文本框的值
                name = generateMixed(8);
                email = $.trim($("#email").val());
                pwd = $.trim($("#password").val());
                pwdrepeat = $.trim($("#pwdrepeat").val());
                phone = $.trim($("#phone").val());
                phonecode3 = $.trim($("#phonecode3").val());

                if (email == "" || email == "请输入邮箱") {
                    $("#email").addClass("input_false");
                    $("#email").attr("type", "text").css("color", "#ef0000").val("请输入邮箱");
                    return false;
                }
                if (pwd == "" || pwd == "请输入密码") {
                    $("#password").addClass("input_false");
                    $("#password").attr("type", "text").css("color", "#ef0000").val("请输入密码");
                    return false;
                }
                $("#password").attr("type", "password").css("color", "#000").removeClass("input_false");

                if (pwdrepeat == "" || pwdrepeat == "请输入密码") {
                    $("#pwdrepeat").addClass("input_false");
                    $("#pwdrepeat").attr("type", "text").css("color", "#ef0000").val("请输入密码");
                    return false;
                }
                $("#pwdrepeat").attr("type", "password").css("color", "#000").removeClass("input_false");
                //手机号
                if (phone == "" || phone == "请输入手机号码") {
                    $("#phone").addClass("input_false");
                    $("#phone").css("color", "#ef0000").val("请输入手机号码");
                    return false;
                }
                $("#phone").css("color", "#000").removeClass("input_false");
                //手机验证码
                if (phonecode3 == "" || phonecode3 == "请输入验证码") {
                    $("#phonecode3").addClass("input_false");
                    $("#phonecode3").css("color", "#ef0000").val("请输入验证码");
                    return false;
                }
                $("#phonecode3").css("color", "#000").removeClass("input_false");
                var headers = {};
                //防伪标记放入headers
                //也可以将防伪标记放入data
                headers["__RequestVerificationToken"] = token;
                //验证完成后使用jason请求
                $.ajax({
                    type: 'POST',
                    async: false,
                    headers: headers,
                    url: '/Member/Register',
                    data: {
                        username: name, password: $.trim($("#password").val()),
                        phone: $.trim($("#phone").val()),
                        phonecode: $.trim($("#phonecode3").val()),
                        email: $.trim($("#email").val()),
                    },
                    success: function (data) {
                        if ((data.Result).toString() === "true") {
                            alert("注册成功");
                            window.location.href = "/";

                        } else {
                            alert(data.Message);
                        }
                    }
                });
            });

            $("#input_sendcode").click(function () {
                //得到手机文本框的值
                phone = $.trim($("#phone").val());
                phonecode = $.trim($("#phonecode").val());
                self = this;
                //得到系统验证码
                var styVer1 = $.trim($("#checkCodeImg").val());

                if (phonecode == "" || phonecode == "请输入右侧验证码") {
                    $("#phonecode").addClass("input_false");
                    $("#phonecode").css("color", "#ef0000").val("请输入右侧验证码");
                    return false;
                } else if (phonecode.length < 5) {
                    $("#phonecode").addClass("input_false");
                    $("#phonecode").css("color", "#ef0000").val("输入5位验证码!");
                } else if (phone == "" || phone == "请输入手机号码") {
                    $("#phone").addClass("input_false");
                    $("#phone").css("color", "#ef0000").val("请输入手机号码");
                    return false;
                } else {

                }
                $.post('/Member/CheckCode', { checkCode: phonecode }, function (result) {
                    if (result.Result) {//验证码正确
                        settime(self);
                        sendPhoneCode();
                    }
                    else {
                        if (result.Message) {//验证码校验异常
                            $("#phonecode").addClass("input_false");
                            $("#phonecode").css("color", "#ef0000").val(result.Message);
                        }
                        else {//检验码不正确
                            $("#phonecode").addClass("input_false");
                            $("#phonecode").css("color", "#ef0000").val("验证码不正确!");
                        }

                    }

                });

            });
            $('#checkCodeImg').click(function () {
                changeCheckCode();
            });

        });

        function changeCheckCode() {
            $('#checkCodeImg').attr('src', '/Member/GetCheckCode?time=' + new Date().getTime());
        }
        function sendPhoneCode() {
            //验证完成后使用jason请求
            $.ajax({
                type: 'POST',
                async: false,
                url: '/Member/GetMobileCode',
                data: { phone: $.trim($("#phone").val()), key: 1, flag: 1 },
                success: function (data) {
                    if (data.Result) {
                        $("#phonecode").attr("placeholder", "请输入手机验证码");
                        $("#phonecode").val("");
                        alert("短信发送成功");

                    } else {
                        alert(data.Message);

                    }
                }
            });
        }
    </script>
</body>
</html>